import React, { Component } from 'react'

export default class Foolter extends Component {
    render() {
        // 只要list中有一个是checked选中了，那么就返回true
        let Completedbool = this.props.list.some((item) => {
            return item.checked
        })

        return (
            <div className='foolterbox'>
                {
                    this.props.list.length > 0 ? (
                        <div className='bottom_box'>
                            {/* <div> */}
                            <span>{this.props.Todolength} 条数据</span>   {/* //写在了getDerivedStateFromProps  生命周期里  */}
                            <div className='anniu'>
                                <span onClick={this.props.All}>全部</span>
                                {
                                    Completedbool && <> <span onClick={this.props.yidu}>已读</span>
                                        <span onClick={this.props.weidu}>未读</span></>
                                }
                            </div>
                            {
                                Completedbool && <span onClick={() => { this.props.childClearCompleted() }}>清空已选</span>
                            }
                        </div>
                    ) : (
                        <div>
                            <span className="msg" data-v-132cabf7="">Congrat, you have no more tasks to do</span>
                        </div>
                    )
                }
            </div>
        )
    }
}
